---
title: إعداد البيئة البرمجية
description: أعِد محررك لبناء المشاريع مع أسترو.
---
import Badge from '~/components/Badge.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

خصص محرر الكود الخاص بك لتحسين تجربة التطوير مع أسترو وفتح ميزات جديدة.

## VS Code

[VS Code](https://code.visualstudio.com/) هو محرر شائع لمطوري الويب، من تطوير مايكروسوفت. المحرك الذي بُني عليه يُستخدم لتشغيل بعض محررات المتصفح الشائعة مثل [GitHub Codespaces](https://github.com/features/codespaces) و [Gitpod](https://gitpod.io/).

يعمل أسترو على أي محرر ولكنّا نوصي باستخدام VS Code لمشاريع أسترو. الإضافة الرسمية [Astro VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) تفعل العديد من المزايا المهمة، وتحسن تجربة التطوير على مشاريع أسترو.

- تلوين الجمل البرمجية (syntax highlighting) لملفات `.astro`
- دعم الأنواع للغة TypeScript على ملفات `.astro`
- [اقتراحات VS Code](https://code.visualstudio.com/docs/editor/intellisense) لإكمال السطر، والتلميحات وغيرها.

للبدأ، ثبّت [إضافة Astro VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) الآن.

📚 انظر كيفة [إعداد TypeScript](/ar/guides/typescript/) في مشاريع أسترو.

### بيئات تطوير JetBrains

وفرنا الدعم لأسترو على بيئة WebStorm منذ الإصدار 2023.1. يمكنك تحميل الملحق الرسمي من [متجر JetBrains](https://plugins.jetbrains.com/plugin/20959-astro) أو بالبحث عن "Astro" في تبويب الملحقات. تتضمن هذه الإضافة مزايا مثل تلوين الجمل البرمجية، وإكمال السطور البرمجية وتنسيقها، ونخطط لإضافة المزيد من المزايا المتقدمة مستقبلًا. كما إنها متاحة [لبيئات JetBrains التي تدعم جافاسكربت](https://www.jetbrains.com/products/#lang=js&type=ide).

بيئة [Fleet IDE](https://www.jetbrains.com/fleet/) القادمة من JetBrains تأتي بدعم لملحقات اللغات التي نستخدمها (language server)، وستعمل مع ملحقات أسترو الرسمية.

## محررات برمجية أخرى

يقدم مجتمعنا المذهل عدة إضافات للمحررات الشهيرة الأخرى، بما في ذلك:

- [VS Code Extension on Open VSX](https://open-vsx.org/extension/astro-build/astro-vscode) <span style="margin: 0.25em;"><Badge variant="accent">دعم رسمي</Badge></span> - إضافة VS Code الرسمية التي تحدثنا عنها أعلاه، متوفرة أيضا على مستودع Open VSX للمحررات المبنية عليه مثل [VSCodium](https://vscodium.com/)
- [Nova Extension](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) <span style="margin: 0.25em;"><Badge variant="neutral">دعم مجتمعي</Badge></span> - يوفر تلوين الجمل البرمجية، وإكمال الجمل على محرر Nova
- [Vim Plugin](https://github.com/wuelnerdotexe/vim-astro) <span style="margin: 0.25em;"><Badge variant="neutral">دعم مجتمعي</Badge></span> - يوفر تلوين الجمل البرمجية، وطي الكود، ويدعم الـ indentation على محررات Vim و Neovim
- Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro) و [TreeSitter](https://github.com/virchau13/tree-sitter-astro) لـ Neovim <span style="margin: 0.25em;"><Badge variant="neutral">دعم مجتمعي</Badge></span> - يوفّر تلوين الجمل البرمجية، (treesitter parsing)، وتوفير دعم الإكمال التلقائي في محرر Neovim

## المحررات في المتصفح

بالإضافة للمحررات المثبة على جهازك، أسترو يعمل بشكل جيد على المحررات السحابية (المحررات في المتصفح عمومًا)، ويشمل الدعم:

- [StackBlitz](https://stackblitz.com/) و [CodeSandbox](https://codesandbox.io/) - محررات سحابية تعمل من المتصفح، تدعم تلوين الجمل البرمجية لملفات `.astro` بدون إعداد ولا تحميل!
- [GitHub.dev](https://github.dev/) - يسمح بتثبيت إضافة Astro VS Code [كملحق web](https://code.visualstudio.com/api/extension-guides/web-extensions)، ليوفر بعض مزايا الإضافة، حاليًا يوفر تلوين الجمل البرمجية فقط.
- [Gitpod](https://gitpod.io/) - بيئة تطوير سحابية كاملة يمكنها تثبيت إضافة Astro VS Code الرسمية من OpenVSX.

## أدوات أخرى

### ESLint

[ESLint](https://eslint.org/) أشهر أدوات اكتشاف الأخطاء في الشفرة البرمجية لـ JavaScript و JSX. يمكنك تثبيت [ملحق يدعمه المجتمع](https://github.com/ota-meshi/eslint-plugin-astro) لأسترو أيضًا.

راجع [دليل المستخدم الخاص بهم](https://ota-meshi.github.io/eslint-plugin-astro/user-guide/) لمعرفة المزيد حول تثبيت وإعداد ESLint لمشروعك.

### Stylelint

[Stylelint](https://stylelint.io/) أداة اكتشاف اخطاء شهيرة لـ CSS. [إعدادات خاصة بأسترو مدعومة من المجتمع](https://github.com/ota-meshi/stylelint-config-html). 

يمكن العثور على تعليمات التثبيت والتكامل مع المحررات ومعلومات إضافية في ملف README الخاص بالمشروع.

### Prettier

[Prettier](https://prettier.io/) هو [منسق](https://ar.wikipedia.org/wiki/برتي_برنت) شائع لأكواد JavaScript ،HTML ،CSS وغيرها. إذا كنت تستخدم [إضافة أسترو لـ VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) أو [إضافة أسترو للمحررات الأخرى](#محررات-برمجية-أخرى)، فستجدها تتضمن تنسيق الكود بـ Prettier.

 لدعم تنسيق أكواد أسترو خارج المحرر (على سبيل المثال في CLI) أو على محررات لا ندعمها، فاستخدم [ملحق أسترو الرسمي لـ Prettier](https://github.com/withastro/prettier-plugin-astro).

للبدأ، ثبّت Prettier أولًا، ثم ملحق أسترو على Prettier:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm install --save-dev prettier prettier-plugin-astro
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm add -D prettier prettier-plugin-astro
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn add --dev prettier prettier-plugin-astro
  ```
  </Fragment>
</PackageManagerTabs>

Prettier سوف يتعرف تلقائيًا على ملحق أسترو عند تشغيله:

```shell
prettier --write .
```

راجع ملف README [لإضافة أسترو على Prettier](https://github.com/withastro/prettier-plugin-astro/blob/main/README.md) لمزيد من المعلومات حول الخيارات المدعومة وكيفية إعداد Prettier داخل VS Code والمزيد.
